<template>
    <div class="home">
        <div class="nav">
            <div class="container">
                <div class="icon_1">
                    <router-link to="/star">
                      <van-icon name="list-switch" size="0.7rem" />  
                    </router-link>
                </div>    
                <ul>
                    <li><router-link active-class="active" to="/home/concern">关注</router-link></li>
                    <li><router-link active-class="active" to="/home/list">推荐</router-link></li>
                    <li><router-link active-class="active" to="/home/hot">热榜</router-link></li>
                    <li><router-link active-class="active" to="/home/story">故事</router-link></li>
                </ul>
                <div class="icon_2">
                    <van-icon name="search" size="0.7rem" />
                </div>
            </div>    
        </div>
        <router-view style="margin-top: 50px;"></router-view>
    </div>
</template>

<style lang="less" scoped>
.home{
    width: 100%;
    .nav{
        position: fixed;
        top: 0;
        width: 100%;
        height: 50px;
        z-index: 1000;
        background-color: #fff;
        .container{
            width: 94%;
            margin: 0 auto;
            margin-top: 10px;
            position: relative;
            ul{
                display: flex;
                justify-content: space-between;
                width: 70%;
                margin: 0 auto;
                font-size: 0.5rem;
                a{
                    position: relative;
                }
                a.active::before{
                    content: '';
                    display: block;
                    width: 32px;
                    height: 10px;
                    background-color:rgba(86, 181, 235, 0.5) ;
                    left: 2px;
                    bottom: -2px;
                    position: absolute;
                }
            }
            .icon_2{
                position: absolute;
                top: 2px;
                right: 0;
            }
            .icon_1{
                position: absolute;
                top: 2px;
                left: 0;
            }
        }
    }
}
</style>